<template>
  <el-dialog
    title="上传版本"
    :visible.sync="show"
    :before-close="beforeClose">
    <el-form>
      <el-form-item>
        <div
          v-if="fileName && fileLink"
          class="file-wrap"
          @click="handleUpload">
          <div class="file-item">文件名：{{ fileName }}</div>
        </div>

        <el-button
          style="margin-bottom: 10px"
          v-if="!fileName"
          @click="handleUpload">
          点击选择文件
        </el-button>
      </el-form-item>

      <input
        hidden
        ref="uploadKeyword"
        type="file"
        accept=".zip"
        @change="onUploadChange($event)" />

      <el-form-item label="所属平台">
        <el-select
          clearable
          v-model="pathName">
          <el-option
            v-for="item in pathList"
            :key="item"
            :value="item"
            :label="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div
      class="dialog-footer"
      slot="footer">
      <el-button
        type="primary"
        :loading="btnLoading"
        @click="handleSubmit">
        确认上传
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addVersion, getVersionSearch } from '@/api/permission'

export default {
  data() {
    return {
      show: false,
      btnLoading: false,
      uploadLoading: false,
      progressTimer: null,
      fileName: null,
      fileLink: null,
      pathName: '',
      progressCount: 0,
      keywordList: [],
      pathList: [],
    }
  },
  props: {
    currentRow: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  watch: {
    show(newVal) {
      if (!newVal) {
        this.fileName = null
        this.fileLink = null
        this.progressCount = 0
        this.uploadLoading = false
        clearTimeout(this.progressTimer)
      }
    },
  },
  methods: {
    // 点击上传关键词
    handleUpload() {
      this.$refs.uploadKeyword.click()
    },

    beforeClose(done) {
      this.$refs.uploadKeyword.value = ''
      done()
    },

    // 点击提交
    async handleSubmit() {
      if (!this.fileLink) {
        return this.$message.error('文件尚未上传成功')
      }
      const { code } = await addVersion(this.fileLink, { PathName: this.pathName })
      if (code === 0) {
        this.show = false
        this.$message.success('上传成功')
        this.$emit('refresh')
      }
    },

    // 监听上传文件
    async onUploadChange(e) {
      const file = e.target.files[0]
      this.fileLink = file
      this.fileName = file.name

      e.target.value = ''
    },
  },
  async mounted() {
    const { data } = await getVersionSearch()
    this.pathList = data?.PathNames ?? []
  },
}
</script>

<style lang="scss" scoped>
.file-item {
  cursor: pointer;
  display: inline-block;
  // width: 200px;
  border: 1px solid #ccc;
  padding: 6px 20px;
  margin-bottom: 10px;
}
.desc {
  display: flex;
  font-size: 14px;
  .text {
    > div {
      margin-bottom: 10px;
    }
  }
}
.tips {
  font-size: 12px;
  color: #999;
}
</style>
